import Vue from 'vue';
import VueRouter from 'vue-router';
import User from '../views/User.vue';
import Demo from '../views/Demo.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Demo,
  },
  /**
   * 当 /user/:id 模式匹配成功
   * User 组件会被渲染在 App 的 <router-view > 中
   */
  {
    path: '/user/:id',
    name: 'User',
    component: User,
    children: [
      {
        /**
         * 当 /user/:id/profile 匹配成功，
         * Demo 组件会被渲染在 User 的 <router-view /> 中
         */
        path: 'profile',
        component: Demo,
        name: 'profile',
      },
      {
        path: 'posts',
        component: Demo,
        name: 'posts',
      },
    ],
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
  },
  {
    path: '/home',
    redirect: '/',
  },
  {
    path: '*',
    component: Demo,
    name: '404',
  },
];

const router = new VueRouter({
  // mode: 'history',
  base: process.env.BASE_URL,
  routes,
});

export default router;
